<template>
  <h1>App...</h1>
  <p>{{ count }}</p>
  <button @click="handleClick" ref="btn">按钮</button>

  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
  <Child :count="count" :users="users" @setCount="handleClick" ref="child" />
  <Son :count="count" :users="users" @setCount="handleClick" />
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import Child from "./Child.vue";
import Son from "./Son/index.vue";

const btn = ref(null);
console.log(btn.value);

const child = ref(null);

onMounted(() => {
  console.log("onMounted");
  console.log(btn.value);
  console.log(child.value);
});

const count = ref(0);
const handleClick = () => {
  count.value++;
};
watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal);
});

const users = reactive([
  { id: 1, name: "jack" },
  { id: 2, name: "rose" },
  { id: 3, name: "tom" },
]);
</script>

<style></style>
